<template>
  <div class="tile">
    <div class="header">
      <el-button size="small" style="margin-right: 15px;" @click="saveData">保存修改</el-button>
      <span>显示帧率监控菜单:</span>
      <el-checkbox
        @change="onChangeShowFramesPerSecond"
        v-model="debugShowFramesPerSecond"
        size="small"
      />
    </div>
    <div class="card">
      <div class="row">
        <div class="flex-center">最大帧率</div>
        <div class="row-input">
          <el-slider
            :step="1"
            :max="120"
            :min="10"
            v-model="inputData.targetFrameRate"
            show-input
            size="small"
            @input="onChangeTargetFrameRate"
          />
        </div>
      </div>
      <div class="row">
        <div class="flex-center">清晰度</div>
        <div class="row-input">
          <el-slider
            :step="0.01"
            :max="1"
            :min="0"
            v-model="inputData.resolutionScale"
            show-input
            size="small"
            @input="onChangeResolutionScale"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onMounted,
  onUnmounted,
  defineProps,
  defineEmits,
  ref,
  reactive
} from "vue";
import SvgIcon from "../../../components/SvgIcon.vue";
import { useStore } from "../../../store/store";
import { ElMessage } from "element-plus";

const store = useStore();
const inputData = reactive({
  targetFrameRate: viewer.viewer.targetFrameRate,
  resolutionScale: viewer.viewer.resolutionScale
});
const debugShowFramesPerSecond = ref(viewer.scene.debugShowFramesPerSecond);


function onChangeShowFramesPerSecond(data) {
  viewer.scene.debugShowFramesPerSecond = data;
}

function onChangeTargetFrameRate(data) {
  viewer.viewer.targetFrameRate = data;
}

function onChangeResolutionScale(data) {
  viewer.viewer.resolutionScale = data;
}

function saveData() {
  const renderData = JSON.stringify(inputData);
  window.localStorage.setItem("renderConfig", renderData);
}
</script>

<style lang="scss" scoped>
.tile {
  height: 300px;
  width: 380px;
  overflow: auto;
  padding: 0 10px;
  font-size: 12px;
}
.header {
  display: flex;
  align-items: center;
  color: #fff;
  margin-left: 15px;
  margin-top: 15px;
}
.tooltip-icon {
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  margin-right: 3px;
}
.row {
  color: #fff;
  margin: 15px 0;
  .row-input {
    margin-left: 20px;
  }
  .flex-center {
    display: flex;
    align-items: center;
  }
}
.card {
  background-color: rgba($color: #000, $alpha: 0.4);
  margin: 10px;
  padding: 2px 10px;
}
.el-col {
  display: flex;
  align-items: center;
}
</style>